<template>
	<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
		<el-form-item prop="username">
			<el-input v-model="loginForm.username" placeholder="请输入学号/账户">
				<template #prefix>
					<el-icon class="el-input__icon">
						<user />
					</el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item prop="password">
			<el-input type="password" v-model="loginForm.password" placeholder="密码" show-password
			autocomplete="new-password">
				<template #prefix>
					<el-icon class="el-input__icon">
						<lock />
					</el-icon>
				</template>
			</el-input>
		</el-form-item>
	</el-form>
	<div class="login-btn">
		<!-- 点击之后，要做什么 -->
		<el-button @click="login(loginFormRef)" size="large" type="primary" :loading="loading"> 登录 </el-button>
		<el-button @click="resetForm(loginFormRef)" size="large">重置</el-button>
	</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import {LoginUserInfoStore} from "@/stores/modules/info"
import { useRouter } from "vue-router";
import { ElNotification } from "element-plus";
import { GlobalStore } from "@/stores";
import { TabsStore } from "@/stores/modules/tabs";
import { HOME_URL } from "@/config/config";
import { pageLogin ,studentLogin} from "@/api/login";
import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
import { KeepAliveStore } from "@/stores/modules/keepAlive";

const router = useRouter();
const tabsStore = TabsStore();
const saveStore = LoginUserInfoStore();
const globalStore = GlobalStore();
const keepAlive = KeepAliveStore();

// 定义 formRef（校验规则）
const loginFormRef = ref();
const loginRules = reactive({
	username: [{ required: true, message: "请输入学号/账户", trigger: "blur" }],
	password: [{ required: true, message: "请输入密码", trigger: "blur" }]
});

const loading = ref(false);
const loginForm = reactive({ username: "", password: "" });
// const add = ()=>{

// }

const login = formEl => {
	if (!formEl) return;
	// 就不执行
	formEl.validate(async valid => {
		if (!valid) return;
		loading.value = true;
		try {
			// console.log(loginForm)
			// 管理员
			const res = await pageLogin({ username: loginForm.username, password: loginForm.password });
			// 学生
			const _res = await studentLogin({studentcard: loginForm.username, password: loginForm.password});
			if (res.data.code === 200) {
				// const {username,img,type} = res.data.data[0];
				globalStore.setToken(res.data.token);
				await initDynamicRouter({id:res.data?.data[0]?.admin_id,type:res.data?.data[0]?.type});
				tabsStore.closeMultipleTab();
				// 保存用户信息
				globalStore.setUserInfo({id:res.data?.data[0]?.admin_id,username:res.data?.data[0]?.username,
					img:res.data?.data[0]?.img,type:res.data?.data[0]?.type})
				keepAlive.setKeepAliveName();
				router.push(HOME_URL);
				ElNotification({
					title: res.data?.data[0]?.username,
					message: "校园生活服务网站 ",
					type: "success",
					duration: 3000
				});
			}else if(_res.data.code === 200){
					// const {username,img,type} = res.data.data[0];
				globalStore.setToken(_res.data.token);
				await initDynamicRouter({id:_res.data?.data[0]?.student_id,type:_res.data?.data[0]?.type});
				tabsStore.closeMultipleTab();
				// 保存用户信息
				globalStore.setUserInfo({id:_res.data?.data[0]?.student_id,username:_res.data?.data[0]?.username,
					img:_res.data?.data[0]?.img,type:_res.data?.data[0]?.type})
				keepAlive.setKeepAliveName();
				router.push(HOME_URL);
				ElNotification({
					title: _res.data?.data[0]?.username,
					message: "校园生活服务网站 ",
					type: "success",
					duration: 3000
				});
			}else{
				ElNotification({
					title: '登录失败',
					message: "账户或密码错误 ",
					type: "error",
					duration: 3000
				});
			}

		} finally {
			loading.value = false;
		}
	});
};

// resetForm
const resetForm = formEl => {
	if (!formEl) return;
	formEl.resetFields();
};
</script>

<style scoped lang="scss"></style>
